import React from 'react';

import { Layout, Table, Tag, Space } from 'antd';
import css from './user.less';

const { Header, Content } = Layout;


class User extends React.Component {
	constructor(props) {
		super(props);
	}

	render() {
		const columns = [
			{
				title: 'Name',
				dataIndex: 'name',
				key: 'name',
			},
			{
				title: 'Age',
				dataIndex: 'age',
				key: 'age',
			},
			{
				title: 'Address',
				dataIndex: 'address',
				key: 'address',
			},
			{
				title: 'Tags',
				key: 'tags',
				dataIndex: 'tags',
				render: tags => (
					<>
						{tags.map(tag => {
							// let color = tag.length > 5 ? 'geekblue' : 'green';
							// if (tag === 'block') {
							// 	color = 'volcano';
							// }else if{ 

							// }
							let color = '#000';
							switch (tag) {
								case 'block':
									color = 'volcano';
									break;
								case 'review':
									color = 'geekblue';
									break;
								case 'pass':
									color = 'green';
									break;
								case 'none':
									color = '#000';
									break;
								default:

							}
							return (
								<Tag color={color} key={tag}>
									{tag.toUpperCase()}
								</Tag>
							);
						})}
					</>
				),
			},
			{
				title: 'Action',
				key: 'action',
				render: (text, record) => (
					<Space size="middle">
						<a>Delete</a>
					</Space>
				),
			},
		];

		const data = [
			{
				key: '1',
				name: 'John Brown',
				age: 32,
				address: 'New York No. 1 Lake Park',
				tags: ['block', 'none'],
			},
			{
				key: '2',
				name: 'Jim Green',
				age: 42,
				address: 'London No. 1 Lake Park',
				tags: ['pass'],
			},
			{
				key: '3',
				name: 'Joe Black',
				age: 32,
				address: 'Sidney No. 1 Lake Park',
				tags: ['cool', 'teacher'],
			},
		];

		return <Layout>
			<Header className={css.header}>头部</Header>
			<Content className={css.content}>
				<Table columns={columns} dataSource={data} />
			</Content>
		</Layout>
	}
}

export default User;
